<%@ page import="java.util.Map" %>
<%@ page import="com.qiku.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主♥页</title>
    <!--引入  jQUery-->
    <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
</head>
<style>
    body {
        background: url("./uploadImg/background.jpg");
    }

    * {
        margin: 0;
        padding: 0;
    }

    #t1 {
        background: #8365bdba;
        width: 1200px;
        height: 60px;
        margin: 0 auto;
    }

    #t1_1 {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    #t2 {
        position: relative;
        width: 130px;
        height: 60px;
        /*background: yellow;*/
    }

    #t3 {
        position: relative;
        font-size: 25px;
        width: 270px;
        height: 60px;
        /*background: blue*/
    }

    #d1 {
        background: #000000ad;
        width: 1200px;
        height: 560px;
        margin: 0 auto;
    }

    #d1_1 {
        display: flex;
        width: 1000px;
        height: 530px;
        margin: 0 auto;
        background: #00dcffa1;
        justify-content: space-around;
    }


    #biaodan {
        position: absolute;
        margin-top: 1px;
        width: 998px;
        height: 49px;
        background: #0c97307d;
    }

    #xiabu {
        margin-top: 51px;
        width: 1000px;
        height: 479px;
        background: #00a16594;
    }

    #d2 {
        position: absolute;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 1px;
        margin-left: 1px;
        width: 220px;
        height: 477px;
        background: #faebd7;
        line-height: 70px;
    }

    #d3 {
        margin-top: 1px;
        margin-left: 222px;
        width: 777px;
        height: 477px;
        background: #ff9292;
    }

    form {
        font-size: 20px;
        margin-top: 7px;
        margin-left: 240px;
    }

    #all,
    #img,
    #vio,
    #zip,
    #txt,
    #music {
        background: transparent;
        border-width: 0px;
        outline: none;
        width: 112px;
        height: 60px;
        font-size: 25px;
        font-weight: bolder;
        color: #265499;
    }

    #gerenzhongxin,#guanlizhongxin {
        margin-top: 29px;
        margin-left: 25px;
        background: transparent;
        border-width: 0px;
        outline: none;
        font-size: 25px;
        font-weight: bolder;
        color: #265499;
    }

    #bao1,
    #bao2,
    #bao3,
    #bao4,
    #bao5,
    #bao6 {
        width: 250px;
        margin: 10px 2px 10px 5px;
        text-align: center;
        float: left;
        height: 200px;
        justify-content: center;
    }

    #fanye {
        display: flex;
        float: left;
        margin-left: 300px;
        mix-blend-mode: color-burn;
        font-weight: bold;
        align-items: center;
    }

    #shang,
    #xia {
        width: 80px;
        height: 30px;
        font-size: 16px;
    }

    .wenjian {
        width: 100px;
        height: 100px;
        margin-top: 3px;
    }

    #dangqianye,
    #zongye {
        font-size: 20px;
    }

    a {
        text-decoration: none;
        color: indigo;
    }

    .ming,
    .riqi,
    .shangchuanming {
        font-size: 15px;
    }

    .shoucang {
        margin-left: 20px;
    }

</style>

<%
    String username = (String) session.getAttribute("username");
    User user = (User) session.getAttribute("user");
//    System.out.println("username:"+username);
    Map<String, String> userLoginMap = (Map<String, String>) application.getAttribute("userLoginMap");
    String sid = userLoginMap.get(username);
//    System.out.println("usernameSID:"+sid);
    String newSid = session.getId();
//    System.out.println("usernameNewSID:"+newSid);
    boolean isLogin = username != null && newSid.equals(sid);
    if (!isLogin && user.getIs_root() != 1) {
        session.setAttribute("username",null);
        session.setAttribute("user",null);
        response.sendRedirect("login.jsp");
%>
<%--<script language="JavaScript">--%>
<%--    top.location='login.jsp';--%>
<%--</script>--%>
<%
} else {
%>
<body onload="findByNameOrUserName()">
<div id="t1">
    <div id="t1_1">
        <div id="t2">
            <h1>RBS★站</h1>
        </div>
        <div id="t3">
            <button id="guanlizhongxin">
                <a href="Administrator.jsp">管理中心</a>
            </button>
            <button id="gerenzhongxin">
                <a href="userCenter.jsp">个人中心</a>
            </button>
        </div>
    </div>
</div>

<div id="d1">
    <div id="d1_1">
        <div id="biaodan">
            <form action="resource" method="get">
                <input type="text" id="rType" value="" hidden>
                资源名:<input type="text" id="resource_id" name="resourceName" value=""
                           style="height: 30px;margin-right: 50px;margin-left: 10px;">
                用户名:<input type="text" id="userName_id" name="userName" value=""
                           style="height: 30px;margin-left: 10px;">
                <input type="button" value="查询" onclick="findByNameOrUserName()"
                       style="width: 60px;height: 30px;font-size: 16px;">
                <a href="resourceUpload.jsp">上传文件</a>
            </form>
        </div>
        <div id="xiabu">
            <div id="d2">
                <ul style="list-style: none">
                    <li>
                        <button id="all" onclick="findResourceByType('')">全部</button>
                    </li>
                    <li>
                        <button id="img" onclick="findResourceByType('img')">图片</button>
                    </li>
                    <li>
                        <button id="music" onclick="findResourceByType('music')">音乐</button>
                    </li>
                    <li>
                        <button id="vio" onclick="findResourceByType('video')">视频</button>
                    </li>
                    <li>
                        <button id="zip" onclick="findResourceByType('zip')">压缩包</button>
                    </li>
                    <li>
                        <button id="txt" onclick="findResourceByType('text')">文档</button>
                    </li>
                </ul>
            </div>
            <div id="d3">
                <div id="bao1">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>
                <div id="bao2">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>
                <div id="bao3">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>

                <div id="bao4">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>
                <div id="bao5">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>
                <div id="bao6">
                    <img class="wenjian" src="" alt="">
                    <input class="r_id" type="text" hidden>
                    <p class="ming"></p>
                    <p class="riqi"></p>
                    <p class="shangchuanming"></p>
                    <p><a class="file_url" href=""></a><input class="shoucang" type="button"
                                                              onclick="addCollect(this)" hidden></p>
                </div>
                <div id="fanye">
                    <button id="shang" onclick="fanye(-1)">上一页</button>
                    <span id="dangqianye">1</span>
                    /<span id="zongye">1</span>
                    <button id="xia" onclick="fanye(+1)">下一页</button>
                </div>
            </div>
        </div>
    </div>
</div>
<%
    }
%>

</body>

<script>

    //实现用户添加收藏的函数
    function addCollect(l) {
        let parentNode = l.parentNode.parentNode;
        var strId = parentNode.getAttribute("id");
        console.log("id：" + strId)
        var ziyuan_id = $("#" + strId).children(".r_id").text();
        console.log(ziyuan_id)
        $.ajax({
            url: "collect",
            data: {
                "methodName": "addCollect",
                "resource_id": ziyuan_id
            },
            type: "get",
            dataType: "json",
            // 响应成功之后   的回调函数
            success: function (data) {
                alert(data.addMsg);
            },
            // 响应失败之后   的回调函数
            error: function () {
                console.log("错误~")
            }
        });
    }

    //根据类型查询资源的函数
    function findResourceByType(str) {
        $("#rType").val(str);
        var val = $("#rType").val();
        findByNameOrUserName(val);
    }

    //实现翻页的函数
    function fanye(num) {
        //当前页
        var ye = parseInt($("#dangqianye").text());
        //总页
        var zongye = parseInt($("#zongye").text());
        switch (num) {
            case 1:
                if (ye < zongye) {
                    ye = ye + num;
                }
                break;
            case -1:
                if (ye > 1) {
                    ye = ye + num;
                }
                break;
        }
        $("#dangqianye").text(ye);
        findByNameOrUserName();
    }

    //根据资源名或用户名查询资源列表
    function findByNameOrUserName(t) {
        // 获取  资源名  用户名
        var username = $("#userName_id").val();
        var resourceName = $("#resource_id").val();
        $.ajax({
            url: "resource",
            data: {
                "methodName": "findByNameOrUserName",
                "resourceName": resourceName,
                "userName": username,
                "type": t
            },
            type: "get",
            dataType: "json",
            // 响应成功之后   的回调函数
            success: function (data) {
                // data 就是  服务端 发送来的数据
                // 解析data 使用 js 将对应的数据  放入指定位置
                var $rId = $(".r_id");
                var $wenjian = $(".wenjian");
                var $ming = $(".ming");
                var $riqi = $(".riqi");
                var $shangchuanming = $(".shangchuanming");
                var $fileUrl = $(".file_url");
                var $shoucang = $(".shoucang");
                //循环初始化控件内容
                for (var j = 0; j < 6; j++) {
                    $wenjian.eq(j).attr("src", "./uploadImg/default.png");//初始化图片路径
                    $wenjian.eq(j).attr("alt", "");//初始化图片信息
                    $rId.eq(j).text("");//初始化文件id
                    $ming.eq(j).text("");//初始化文件名
                    $riqi.eq(j).text("");//初始化上传日期
                    $shangchuanming.eq(j).text("");//初始化上传用户名
                    $fileUrl.eq(j).attr("style", "");//初始化超链接样式
                    $fileUrl.eq(j).attr("href", "");//初始化超链接
                    $fileUrl.eq(j).text("");//初始化超链接内容
                    $shoucang.eq(j).attr("hidden", true);//隐藏收藏按钮
                    $shoucang.eq(j).val("")//初始化收藏按钮的value
                }
                var ye = $("#dangqianye").text();
                var dangqian = parseInt(ye);
                var length = data.length;
                var yeshu = (length % 6 == 0 ? length / 6 : parseInt(length / 6) + 1)
                $("#zongye").text(yeshu);
                var num = dangqian * 6 >= length ? length - (dangqian * 6 - 6) : dangqian * 6
                for (var i = dangqian * 6 - 6; i < dangqian * 6 - 6 + num; i++) {
                    var r = data[i];
                    var r_id = r.resource_id;
                    var r_name = r.resource_name;
                    var username = r.uploader_name;
                    var type = r.type;
                    var uploadDate = r.upload_date;
                    var fileUrl = r.file_url;
                    var url = "";
                    switch (type) {
                        case "jpeg":
                        case "jpg":
                        case "png":
                        case "bmp":
                        case "gif":
                        case "svg":
                        case "raw":
                        case "ico":
                            url = "./uploadImg/img.png";
                            break;
                        case "mp3":
                        case "flac":
                        case "acc":
                        case "wav":
                        case "midi":
                            url = "./uploadImg/music.png";
                            break;
                        case "txt":
                        case "md":
                        case "pdf":
                        case "doc":
                        case "docx":
                        case "rtf":
                            url = "./uploadImg/text.png";
                            break;
                        case "mp4":
                        case "avi":
                        case "mkv":
                        case "flv":
                        case "ogg":
                        case "m4v":
                        case "mov":
                        case "rmvb":
                            url = "./uploadImg/video.png";
                            break;
                        case "zip":
                        case "7z":
                        case "rar":
                        case "exe":
                            url = "./uploadImg/zip.png";
                            break;
                        default:
                            url = "./uploadImg/error.png";
                    }
                    var ii = i % 6;
                    $wenjian.eq(ii).attr("src", url);
                    $wenjian.eq(ii).attr("alt", r_name);
                    $rId.eq(ii).text(r_id);
                    $ming.eq(ii).text("文件名：" + r_name);
                    $riqi.eq(ii).text("上传日期：" + uploadDate.substring(0,10));
                    $shangchuanming.eq(ii).text("上传用户：" + username);
                    $fileUrl.eq(ii).attr("style", "color:green;font-weight:bold;background-color:chocolate;border-radius:5px;border:1px solid wheat;");
                    $fileUrl.eq(ii).attr("href", "http://" + fileUrl);
                    $fileUrl.eq(ii).attr("download", r_id + "_" + r_name)
                    $fileUrl.eq(ii).text("下载文件");
                    $shoucang.eq(ii).attr("hidden", false);//隐藏收藏按钮
                    $shoucang.eq(ii).val("收藏")//初始化收藏按钮的value
                }
            },
            // 响应失败之后   的回调函数
            error: function () {
                console.log("错误~")
            }
        });
    }

</script>
</html>
